<template>
  <div id="mainloginFrame">
    <div id="logincss">

      <el-form  ref="form" label-width="80px" class="">
        <h2 class="titlecss" style="text-align: center">人事管理系统入口</h2>
        <el-form-item label="用户名：">
          <el-input v-model="userdata.userId" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="userdata.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <div id="part2">
          <el-form-item label="验证码" >
            <el-input v-model="userVerify" placeholder="请输入验证码" style="width: 180px"></el-input>
            <img :src="imgUrl" @click="refresh" style="cursor:pointer;"><br>
            <a @click="cleartimesAndRestart" style="cursor:pointer">看不清？点击图片刷新</a><span> {{verifycontent}}</span>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button  @click="userlogins" >登录</el-button>
          <el-button @click="userresetpassword" >修改密码</el-button>

        </el-form-item>
        <el-row style="text-align: center;">
          <el-button @click="RequestFindPassword" >忘记密码申请</el-button>
        </el-row>
          <el-form-item>
            <el-button @click="RequestForJob">我要求职</el-button>
          </el-form-item>
      </el-form>

    </div>
  </div>

</template>

<script>
  import el from 'element-ui'
  import $axios from 'axios'
  import register from "./resetpassword";
  import Testpwd from "../testpwd";
  import Testuserdata from "../testuserdata";
    export default {
        name: "Userlogin",
      data()
      {
        return{
          imgUrl:"",
          verifycontent: "",
          totalTimes: 90,
          userdata:[
            {
              userId:"",
              password:"",
              role:""
            }
          ],
          userVerify:""
        }
      },
      mounted() {
        window.sessionStorage.removeItem("userId")
        window.sessionStorage.removeItem("role")
        window.sessionStorage.removeItem("departmentId")
        this.cleartimes()
          this.refresh()
      },
      methods:{
        refresh:function () {
            var nums = Math.ceil(Math.random()*100);
            this.$axios.get('/verifyCode',{
              responseType:"blob"
            } ).then(
              res=>{
                this.imgUrl =window.URL.createObjectURL(res.data)
              }
            )


          if(this.totalTimes < 90)
          {
            this.cleartimes();
          }
            this.totalTimes = 90;
          this.timer = setInterval(()=>{
            this.verifycontent =this.totalTimes+"s后验证码失效"
            this.totalTimes --;
            if(this.totalTimes <0)
            {
              this.cleartimes();
              this.verifycontent = "验证码失效请刷新！";
            }
          },1000)
    },
        cleartimes()
        {
          if(this.timer)
          {
            clearInterval(this.timer);
          }
        },
        cleartimesAndRestart()
        {
          this.cleartimes()
          this.refresh()
        },
        userlogins() {
          var faluserId = this.userdata.userId
          // alert(JSON.stringify(faluserId))
              this.$axios.post("/login",
                {
                  userId:this.userdata.userId,
                  password:this.userdata.password,
                  verify:this.userVerify
                }
              )
          .then((res)=>{
            var users = this.userdata.userId
            this.userdata.userId="";
            this.userdata.password="";
            this.userVerify="";
            this.cleartimesAndRestart()

            if(res.data.msg =="FalseVerify")
            {

              this.$router.push({path: '/'})
              return this.$message.error("验证码错误或失效")
            }
            if(res.data.msg =="NoaccountOrPassword")
            {
              this.$router.push({path: '/'})
              return this.$message.error("用户账号或密码不能为空！")
            }
            if(res.data =="failaccorpassword")
            {
              this.$router.push({path: '/'})
              return this.$message.error("用户名或密码错误")
            }
            if(res.data.msg == "okbutnotemployee")
            {
              this.$axios.post(("/employee/getEmployee"),{
                userId:faluserId
              }).then((resp)=>{
                window.sessionStorage.setItem("role",JSON.stringify(resp.data.role).replace(/\"/g, ""))
                this.$store.commit('setrole',JSON.stringify(resp.data.role).replace(/\"/g, ""))
                window.sessionStorage.setItem("userId",resp.data.userId)
                this.$store.commit('setuserId',resp.data.userId)
              })
              this.$axios.post("/selectDepId",{
                userId:users
              }).then((res)=>{
                window.sessionStorage.setItem("departmentId",JSON.stringify(res.data.departmentId).replace(/\"/g, ""))
                this.$store.commit('setdepartmentId',JSON.stringify(res.data.departmentId).replace(/\"/g, ""))
                // alert(JSON.stringify(this.$store.state.departmentId))
              })

                this.$router.push({path: '/home'})
                return this.$message.success("登录成功");
            }
            if(res.data.msg =="successlogin"&&res.status == 200)
            {

              this.$axios.post("/getUser",{
                userId:users
              }).then((resp)=>{
              // alert(JSON.stringify(resp.data.role).replace(/\"/g, ""))
                window.sessionStorage.setItem("role",JSON.stringify(resp.data.role).replace(/\"/g, ""))
                this.$store.commit('setrole',JSON.stringify(resp.data.role).replace(/\"/g, ""))

                window.sessionStorage.setItem("userId",users)
                this.$store.commit('setuserId',users)
              })
              this.$axios.post("/selectDepId",{
                userId:users
              }).then((res)=>{
                window.sessionStorage.setItem("departmentId",JSON.stringify(res.data.departmentId).replace(/\"/g, ""))
                this.$store.commit('setdepartmentId',JSON.stringify(res.data.departmentId).replace(/\"/g, ""))
                // alert(JSON.stringify(this.$store.state.departmentId))
              })

              this.$axios.post("/deletepasswordrequest",{
                userId:users
              }).then((ress)=>{
                if (ress.data.msg == "success"&&res.status == 200)
                {

                  this.$router.push({path: '/home'})
                  return this.$message.success("登录成功，忘记密码请求已撤销，欢迎用户！"+users)
                }
                else {

                  this.$router.push({path: '/home'})
                  return this.$message.success("登录成功,欢迎用户！"+users)
                }
              })

            }



          })
          .catch(function (error) {
            console.log(error)

          })
        },
        userresetpassword()
        {
            this.$router.push({path:'/resetpassword'})
        },
        RequestFindPassword()
        {
          this.$router.push({path:'/RequestFindPassword'})
        },
        RequestForJob()
        {
          this.$router.push({path:'/forjob'})
        }
      },
      components: {register}
    }


</script>

<style scoped>
  #mainloginFrame{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #42b983;
  }
#logincss{
  width: 350px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}


  a:link {
    color: #330099;
    text-decoration: none;
  }
  a:visited {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    color: #FF0000;
  }
  a:active {
    text-decoration: none;
  }
</style>
